<template>
	<!--头部-->
	<div class="vue_app">
            <ul class="aui-list aui-media-list commodity_list subtotal_list" style="padding-bottom: 2.5rem;">
                <!-- 去掉li的aui样式，解决点击任何区域都有点击效果的bug -->
                <li style="padding-left:0.75rem;padding-right:0.75rem;">
                   <!-- <div @click="test" >点击</div> -->
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media">
                            <!-- data.goodsImg ? data.goodsImg : -->
                            <img :src="goodsInfo.goodsImg || 'static/image/demo2.png'">
                        </div>
                        <div class="aui-list-item-inner" style="width: 50%;">
                            <!--<p>商品名称：</p>-->
                            <p style="font-size: 0.7rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"><b>{{goodsInfo.goodsName}}</b></p>
                            <p style="margin-top: 0.5rem;">{{goodsInfo.goodsSpec}}</p>
                        </div>                                                          
                        <div class="aui-list-item-inner_1" style="margin-top:1rem;" :style="{width:windowWidth<350?'55%':'45%'}">
                            <div class="evalIconBox" style="margin-left:2.5rem;" :style="{backgroundColor: flag? '#ef5423':'#fff',border:flag?'':'1px solid #e8e8e8'}" @click.stop="changeFlag(true)">
                                <i class="icon njfont nj-dianzan" :style="{color : flag ? '#fff' : ''}"></i>
                                <div :style="{color : flag ? '#fff' : ''}">赞</div>
                            </div>
                            <div class="evalIconBox" style="margin-left:0.5rem;"  :style="{backgroundColor: flag? '#fff':'#ef5423',border:flag?'1px solid #e8e8e8':''}"  @click.stop="changeFlag(false)">
                                <i class="icon njfont nj-cai" :style="{color : flag ? '' : '#fff'}"></i>
                                <div :style="{color : flag ? '' : '#fff'}">踩</div> 
                            </div>
                        </div>
                    </div>
                    <!-- flag点赞 还是点踩 -->
                    <div v-if="flag" class="par_comment" style="padding: 0px;">
                        <p class="comment" v-for="(index,num) in comment_1 " @click.stop="commentTar(index)" :key='num' ref="index">{{index}}</p>
                    </div>
                    <div v-else class="par_comment">
                        <p class="comment" v-for="index in  comment_2" @click.stop="commentTar(index)" ref="index" :key='index'>{{index}}</p>
                    </div>
                    
                    <div>
                        <textarea ref='note' style="height: 3.5rem;margin-top: 0;border:0;border: 1px solid #eee;padding: 0.5rem;" name="" id="" cols="20" rows="30" :placeholder="'商品满足你的期待吗？说说它的优点和美中不足吧。（200字以内）'" maxlength="200" v-model="commentContent" @input="commentSurplus">
                        </textarea>
                        <!-- <span class="sur">{{Surplus>=0?Surplus:'0'}}/200</span> -->
                    </div>
                    <!-- v-if="showImg" -->
                    <img-UpLoad-Ios v-if="getIosVersion()" ref="imgUp" :title="'上传图片'"  :toast="false" :autoClear="false" style="background-color: #fff;background-image: none;"></img-UpLoad-Ios>
                    <div v-if="!getIosVersion()">
                        <div style="display:flex;justify-content:space-between;width:100%;margin-bottom:0rem;margin-top:1rem;">
                            <div>
                                上传图片：
                            </div>
                            <div style="font-size:0.5rem;color:#999;">
                                最多可上传5张(取消请长按图片)
                            </div>
                        </div>
                        <img-UpLoad ref="imgUp" :title="'上传图片'"  :toast="false" :autoClear="false" style="background-color: #fff;background-image: none;"></img-UpLoad>
                    </div>
                </li>  
            </ul>
		<!-- <div style="height: 2.5rem;padding: 0px;border-radius: 0px;background-color:#ef5423 !important;" class="aui-btn aui-btn-block aui-btn-danger settle_accounts fixed_div aui-card-list-content-padded aui-border-b aui-border-t">
			<div @click="upLoadImg" v-if="showImg" style="height: 2.5rem;line-height: 2.5rem;font-size: 1rem;">提交</div>
			<div @click="submit" v-else style="height: 2.5rem;line-height: 2.5rem;font-size: 1rem;">提交</div>
		</div> -->
	</div>
</template>

<script>
	import axios from 'axios';
    import { Toast } from '../../utils/toast.js';
    import ImgUpLoaderIos from '../../components/ImgUpload/index'; //IOS 上传
	import ImgUpLoader from '../../components/ImgUpload/index2'; //android 上传
	import { selectCommentConfig, saveGoodsComment } from '../../api/wxh/getData.js';
	import { mapGetters, mapMutations } from "vuex";
    import { CHANGE_NAVIGATION,EXIT_WEBVIEW } from '../../config/postMessage-types';

	// Vue.use(VueClip);
	export default {
		data() {
			return {
				options: {
					url: '/upload',
					paramName: 'file',
					maxFilesize: 1,
					maxFiles: 5,
				},
				files: [],
				comment_1: '',
				comment_2: '',
				flag: true,
				commentTarget: [],
				commentContent: '',
				showImg: '', //是否可以上传图片
				Surplus: 0,
				imgUrl_1: '',
				imgUrl_2: '',
                flagclick: false,
                imageList:'',
                windowWidth:window.innerWidth
			}
        },
        props:{
            goods: {
                type:Object,
                default:() => {
                    return {}
                }
            },
            commentConfigDate:{
                type:Object,
                default:() => {
                    return {}
                }
            }
        },
		beforeCreate() {
			// this.init();

		},
		components: {
            "imgUpLoad": ImgUpLoader,
            "imgUpLoadIos":ImgUpLoaderIos
			// "my-header": MyHeader,
			// "translate-main": TranslateMain,
        },
        created(){
            let titleConfig = JSON.stringify({
                type: CHANGE_NAVIGATION,
                params: {
                    title: '商品评价'
                }
            })
            setTimeout(() => {
                window.postMessage(titleConfig)
            },0)
        },
		mounted() {
            // this.initData();
            // console.log(this.getIosVersion(),'判断类型 ture IOS')
            this.initTextareaFocusEvent();
		},
		computed: {
			screenHeight() {
				return window.innerHeight - '80';
			},
			...mapGetters('zx', [
				"getEvaluateDate"
            ]),
            goodsInfo(){
                return this.goods;
            }
		},
        watch:{
            commentConfigDate(newVal,oldVal){
                this.initData(newVal)
            },
        },
		methods: {
            //判断是否是IOS
            getIosVersion() {
                var u = navigator.userAgent, app = navigator.appVersion;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) {
                    //这个是安卓操作系统
                    return false
                }
                if (isIOS) {
            　　　　 return true;
                }
            },
            //监听买家留言框的focus事件 开始
	        initTextareaFocusEvent() {
	            this.$refs.note.onfocus = () => {
                    console.log(window.screen.height,'高度')
	                console.log("input框框获取到了焦点");
	                this.initInputStyle();
	            }
	            this.$refs.note.onblur = () => {
	                console.log("失去焦点");
                    //重置样式
                    console.log(window.screen.height,'高度')
	                this.unsetStyle();
	                
	            }
	        },
	        //如果是安卓机,调整页面margin-bottom供用户看到input框
	        initInputStyle() {
	            let isAndroid = navigator.userAgent.indexOf("Android") > -1;
	            if (isAndroid) {

					let box = document.getElementById('evaluteContent');
					let box2 = document.getElementById('evaluteOutBox');

	                let scrollTopContainer = document.body;

	                box.style.marginBottom = "10vh";
	                box2.scrollTop = 200;
					console.log(box.scrollTop,'滚动');
					console.log(box.scrollTop,'滚动');
	                //给一个scrollTop值的变化，自动滑上去
	                let distance = parseInt(getComputedStyle(box, null).marginBottom.slice(0, -2));
	                let duration = 200 / 16.7;
	                let speed = distance / duration;
	                this.scrollAnim = setInterval(() => {
	                    scrollTopContainer.scrollTop += speed;
	                    if (scrollTopContainer.scrollTop >= distance) {
	                    	console.log("/-*****-/");
	                        scrollTopContainer.scrollTop = distance;
	                        clearInterval(this.scrollAnim);
	                    }
	                }, 16.7);
	            }
	        },
	        unsetStyle() {
	            //清除计时器
	            clearInterval(this.scrollAnim);
	            this.scrollAnim = null;
				let box = document.getElementById('evaluteContent');
				let box2 = document.getElementById('evaluteOutBox');
	            box.style.marginBottom = "unset";
	            box2.scrollTop = 0;
	        },
	        //监听买家留言框的focus事件  结束
            changeFlag(flag){
                this.flag = flag;
            },
            test(){
                console.log(123456789)
            },
			initData(newVal) {
                if(newVal){
                    let res = newVal;
                    if(res && res.data && res.data.length){
                        this.showImg = res.data[0].showImage;
                        let con = res.data[0].goodsCommentConfigsList;
                        if(con && con.length){
                            this.comment_1 = con[0].goodsCommentTarget.split('，');
                            this.comment_2 = con[1].goodsCommentTarget.split('，');
                        }
                    }
                }
            },
            //判断commentTarget中是否已经有此标签
            checkCopyTarget(singer){
                let flag = false;
                this.commentTarget.map((item,index)=>{
                    if(singer == item){
                        flag = true;
                    }
                })
                return flag;
            },
			commentTar(index) {
                console.log('点击标签啦',this.commentTarget,index)
				if(this.checkCopyTarget(index)) {
					this.commentTarget.splice(this.commentTarget.indexOf(index), 1);
					[...this.$refs.index].forEach(function(ind, value) {
						if(ind.innerHTML == index) {
                            ind.style.color = "#999";
                            ind.style.border = '1px solid #e8e8e8'
						}
					})
				} else {    
					this.commentTarget.push(index);
					console.log(this.commentTarget,'点击标签啦1');
					[...this.$refs.index].forEach(function(ind, value) {
						if(ind.innerHTML == index) {
                            ind.style.color = "#38b035";
                            ind.style.border = '1px solid #38b035'
						}
					})
				}
				// console.log(this.commentTarget);
			},
			removeColor() {
				this.commentTarget = [];
				[...this.$refs.index].forEach((val) => {
					val.style.color = "#908f8f"
				});
			},
			async submit() {
                //改版后不限制必选标签
				// if(this.commentTarget.length == 0) {
					
				// 	return
                // }
                let res = await  this.$refs.imgUp.upload();
                this.imageList = res.data.join();
				let config_1 = {
					"commentTarget": this.commentTarget.join(),
					"commentContent": this.commentContent.replace(/\$/g,''),
					"imageList": this.showImg ? this.imageList : '',
					"comment": this.flag ? "赞" : "踩",
				}
				let config_2 = {
					"orderNo": this.goods.orderNo,
					"goodsId": this.goods.goodsId,
					"goodsCode": this.goods.goodsCode,
					"goodsName": this.goods.goodsName,
					'buyType': this.goods.buyType,
				}
				
				let config = { ...config_1,
					...config_2
                }
                return config;
				// if(this.flagclick == false) {
				// 	this.flagclick = true
                //     let req = await saveGoodsComment(config);
                //     console.log(config,'提交订单',req)
				// 	if(req.returnCode == 1) {
                //         Toast({
                //             message: "评价成功!",
                //             duration: 2000,
                //             type: 'success'
                //         });
				// 	}else{
                //         Toast({
                //             message: "评价失败！",
                //             duration: 2000,
                //             type: 'fail'
                //         });
                //     }
				// }

			},
			getImgUrl(res) {
                console.log(res.data);
                // this.imageList = res.data.join();
				// this.submit();
			},
			upLoadImg() {
				this.$refs.imgUp.upload();
            },
            userEvalute(){
                console.log('方法调用')
                if(this.showImg){
                    console.log('上传图片');
                    this.$refs.imgUp.upload();
                }else{
                    this.submit();
                }
            },
			commentSurplus() {
                this.Surplus = 200 - this.commentContent.length;
                
                //增加字数提示
			}
		}
	}
</script>

<style scoped>
    .evalIconBox {
        height:1.1rem;
        line-height: 1.1rem;
        display: flex;
        flex-direction: row;
        padding: 0.1rem 0.3rem;
        border-radius: 0.75rem;
    }
	.vue_app {
		height: 100%;
	}
	
	.aui-list-item {
		padding-right: 0.75rem;
		border: none;
	}
	/*.item_0>div {
		border-bottom: 1px solid #ccc;
	}*/
	
	textarea {
		/*background: #ccc;*/
		height: 7rem;
		border: 1px solid #eee;
		padding: 0.5rem;
		/*width: */
	}
	/*.backgroundShowPic {
	  position: absolute;
	  right: 0.5rem;
	  top: 0.5rem;
	  -webkit-background-size: cover;
	  background-size: cover;
	  background-position: center;
	}*/
	
	.par_comment {
		display: flex;
		/*justify-content: space-around;*/
		flex-direction: row;
		font-size: 16px;
		padding-top: 0.5rem;
		flex-wrap: wrap;
	}
	
	.par_comment>p {
		width: auto;
		height: auto;
		border-radius: 5px;
		border: 1px solid #f0eded;
		color: #908f8f;
		padding: 0.1rem  0.3rem;
		margin-right: 0.2rem;
		margin-bottom: 0.4rem;
	}
	.aui-list-item-media {
		/*width: 33%;
		height: 5rem;*/
		margin: 0.25rem 0;
	}
	
	.aui-list-item-inner {
		text-align: left;
		margin-left: 1rem;
		line-height: 1.5rem;
	}
	
	.aui-list-item-inner_1 {
		text-align: center;
		/*padding-top: 2rem; */
		display: flex;
		width: 20%;
		position: absolute;
		right: 0;
		top: 1rem;
		padding-right: 0.75rem;
	}
	
	.sur {
		position: absolute;
		bottom: 10rem;
		right: 0.75rem;
		color: #ccc;
		font-size: 0.6rem;
	}
	
	.evaImg {
		display: inline-block;
		width: 2rem;
		height: 2rem;
	}
	/*.settle_accounts {
		position: static;
		border-top: 0px;
	}*/
	.aui-list-item.item_1>h3 {
		text-align: left;
		height: 1.5rem;
		line-height: 1.5rem;
	}
</style>